<template>
  <div style="margin-top: 30px;margin-left: 15px">
    <p align="center">
    <p align="center">男性比例</p>
    <el-progress :text-inside="true" :stroke-width="26" :percentage="51"></el-progress>

    <p align="center">女性比例</p>
    <el-progress :text-inside="true" :stroke-width="20" :percentage="49" status="exception"></el-progress>
    <div align="center">
      <div id="chart" style="width: 400px; height: 400px"></div>
    </div>
  </div >
</template>

<script>
    export default {
        name: "Sex_ratio_1",
      mounted() {
        var dom = document.getElementById('chart');
        var chart = this.$echarts.init(dom);
        var option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '性别比例',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {value: 105, name: '男性'},
                {value: 0, name: '变性（男-女）'},
                {value:0, name: '变性（女-男）'},
                {value: 102, name: '女性'}
              ]
            }
          ]
        };
        chart.setOption(option);
      }
    }
</script>

<style scoped>

</style>
